<template>
    <div class="cretae-container">
        <div class="top">
            <span>
                角色创建
            </span>
            <el-button type="default" @click="back">返回</el-button>
        </div>
        <el-form :model="form" label-width="120px">
            <el-form-item label="角色名称" prop="role_name" required>
                <el-input v-model="form.role_name" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item label="角色描述" prop="role_desc">
                <el-input v-model="form.role_desc" placeholder="请输入角色描述" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script setup>
import { requestIns } from '@/utils/request'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = reactive({
    role_name: '',
    role_desc: ''
})



const onSubmit = async () => {
    const res = await requestIns.request('/role/create', 'post', form)
    if (res.state == 201) {
        ElMessage.success(res.msg)
    } else {
        ElMessage.error(res.msg)
    }
    reset()
    back()
}
const reset = () => {
    form.role_name = ''
    form.role_desc = ''
}
const back = () => {
    router.push('/role')
}
</script>

<style scoped>
.cretae-container {
    background-color: #fff;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .el-form {
        box-sizing: border-box;
        padding: 20px;
    }
}
</style>